
<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
<script lang="ts" setup>
import { reactive,toRef,toRefs } from 'vue';

let person = reactive({
  name:'张三',
  age:18,
  test:'测试'
})
let {test} = person
console.log('test',test);   //解构出来的test不是响应式的

let {name,age} = toRefs(person)
// name和age变成了ObjectRefImpl构造函数的实例对象，其实可以理解为走了一个这样的流程：
// let name = ref('张三')    此时name和age就变成了一个ref定义响应式数据
console.log('name',name);   //解构出来的name是响应式的
console.log('age',age);     //解构出来的age是响应式的

console.log('看看torefs',toRefs(person));


function changeName(){
  name.value += '~'
  console.log('person和name都改变了','我是person：'+person.name,'我是name：'+name.value);
  
}
function changeAge(){
  age.value++
}
// toRef
// 语法： toRef(object，key)
let ximy = toRef(person,'age')   //此时ximy变成了一个ref定义的响应式数据
console.log('ximy',ximy,ximy.value);

</script>
<style>
button{
  margin-left: 10px;
}
</style>